import { connect } from 'dva';
import React, { useEffect, useState } from 'react';
import config from '../../config';
import styles from './index.less';


const home = props => {
  const { form, dispatch } = props;
  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0)
  const [page, setPage] = useState({})

  const resizeUpdate = (e) => {
    // 通过事件对象获取浏览器窗口的高度
    let h = e.target.innerHeight;
    let w = e.target.innerWidth;
    setHeight(h);
    setWidth(w)
  };

  useEffect(() => {
    // 页面刚加载完成后获取浏览器窗口的大小
    dispatch({
      type: 'Public/getCategoryGet',
      payload: { id: props.id }
    }).then((res) => {
      setPage(res?.data || [])
    })
    let h = window.innerHeight;
    let w = window.innerWidth;
    setHeight(h)
    setWidth(w)
    // 页面变化时获取浏览器窗口的大小 
    window.addEventListener('resize', resizeUpdate);
    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    }
  }, []);
  const officialCode = props?.setTing?.officialCode && JSON.parse(props?.setTing?.officialCode)
  const banner = page?.categoryImg && JSON.parse(page?.categoryImg)
  return (
    <>
      {
        width > 700 ?
          <div className={styles.contact}>
            <div className={styles.bannerImg}>
              <img src={config.targetUrl + banner?.[0]?.path} height="100%" width="100%" />
            </div>
            <div className={styles.relation}>
              <div className={styles.title}>联系我们</div>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <div className={styles.relationLeft}>
                  <div className={styles.leftTitle}>关于我们</div>
                  <div className={styles.leftinfo}>生态伙伴共建小程序技术标准硬件、OS、超级App构筑完整生态，定义移动时代优先体验，共建智能小程序行业标准，打破孤岛，共建繁荣开放生态</div>
                  <div className={styles.leftinfo}>QQ：{props?.setTing?.qq}</div>
                  <div className={styles.leftinfo}>手机号码：{props?.setTing?.cellphone}</div>
                  <div className={styles.leftinfo}>邮箱：{props?.setTing?.email}</div>
                  <div className={styles.leftinfo}>办公室电话：{props?.setTing?.telphone}</div>
                  <div className={styles.leftinfo}>公司地址：{props?.setTing?.address}</div>
                </div>
                <div className={styles.relationRight}>
                  <img src={config.targetUrl + officialCode?.[0]?.url} width="90%" />
                </div>
              </div>
            </div>
          </div> :
          <div className={styles.mini_contact}>
            <div className={styles.bannerImg}>
              <img src={config.targetUrl + banner?.[0]?.path} height="100%" width="100%" />
            </div>
            <div className={styles.mini_relation}>
              <div className={styles.mini_title}>联系我们</div>
              <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
                <div className={styles.mini_relationLeft}>
                  <div className={styles.mini_leftTitle}>关于我们</div>
                  <div className={styles.mini_leftinfo}>生态伙伴共建小程序技术标准硬件、OS、超级App构筑完整生态，定义移动时代优先体验，共建智能小程序行业标准，打破孤岛，共建繁荣开放生态</div>
                  <div className={styles.mini_leftinfo}>QQ：{props?.setTing?.qq}</div>
                  <div className={styles.mini_leftinfo}>手机号码：{props?.setTing?.cellphone}</div>
                  <div className={styles.mini_leftinfo}>邮箱：{props?.setTing?.email}</div>
                  <div className={styles.mini_leftinfo}>办公室电话：{props?.setTing?.telphone}</div>
                  <div className={styles.mini_leftinfo}>公司地址：{props?.setTing?.address}</div>
                </div>
                <div className={styles.mini_relationRight}>
                  <img src={config.targetUrl + officialCode?.[0]?.url}  width="100%"/>
                </div>
              </div>
            </div>
          </div>
      }
    </>

  );
};

export default connect(({ }) => ({}))(home);
